<template>
  <a-modal
    :width="600"
    :visible="visible"
    title="编辑场景时长"
    @ok="handleOk"
    @cancel="handleClose"
    centered
  >
    <div class="form_con">
      <div class="form_item">
        <div class="form_title">时长：</div>
        <div class="form_value">
          <a-col :span="16">
            <a-slider
              style="width: 100%"
              :step="1"
              :min="0"
              :max="15"
              v-model:value="setForm.duration"
            />
          </a-col>
          <a-input-number
            style="width: 130px; margin-left: 10px"
            :min="0"
            :max="60"
            v-model:value="setForm.duration"
          />
        </div>
      </div>
      <div class="form_item">
        <div class="form_title"></div>
        <div class="form_value">
          若场景内的素材短于设置的固定时长，将按照素材实际时长预览/合成视频
        </div>
      </div>
      <div class="form_item">
        <div class="form_title">截取方式：</div>
        <div class="form_value">
          <a-radio-group v-model:value="setForm.cut_from" name="radioGroup">
            <a-radio value="head">从头截取</a-radio>
            <a-radio value="random">随机截取</a-radio>
          </a-radio-group>
        </div>
      </div>
      <div class="form_item">
        <div class="form_title"></div>
        <div class="form_value">
          若素材超过了设置的场景时长，将按照选择的方式截取素材片段剪辑
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "vue";
import { FolderAddOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
      default: {},
    },
  },

  components: {},

  setup(props, context) {
    const state = reactive({
      setForm: {
        cut_from: "head",
        duration: 0,
      },
    });

    const handleOk = () => {
      context.emit("submit", state.setForm);
      context.emit("close");
    };

    const handleClose = () => {
      context.emit("close");
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          state.setForm = {
            cut_from: props.data?.cut_from || "head",
            duration: props.data?.duration || 0,
          };
        }
      }
    );

    return {
      ...toRefs(state),
      handleOk,
      handleClose,
    };
  },
});
</script>

<style lang="less" scoped>
.form_con {
  .form_item {
    display: flex;
    align-items: center;
    margin-top: 15px;
    .form_title {
      width: 70px;
      color: #999;
      text-align: right;
    }
    .form_value {
      color: #999;
      font-size: 12px;
      display: flex;
      align-items: center;
      width: calc(100% - 70px);
    }
  }
}
</style>
